<template>
	<div class="system-quartzManager-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="1000px">
			<el-form :model="state.ruleForm" size="default" label-width="120px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="jobClass" prop="jobClass">
							<el-input v-model="state.ruleForm.jobClass" placeholder="jobClass" clearable
								:disabled.sync="state.dialog.type == 'edit'"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="jobName" prop="jobName">
							<el-input v-model="state.ruleForm.jobName" placeholder="jobName" clearable
								:disabled.sync="state.dialog.type == 'edit'"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="jobGroupName" prop="jobGroupName">
							<el-input v-model="state.ruleForm.jobGroupName" placeholder="jobGroupName" clearable
								:disabled.sync="state.dialog.type == 'edit'"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="执行计划" prop="jobTime">
							<el-input v-model="state.ruleForm.jobTime" placeholder="jobTime" clearable></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="工作类型" prop="timeUnit">
							<el-select name="timeUnit" v-model="state.ruleForm.timeUnit">
								<el-option label="毫秒" value="MILLISECONDS"></el-option>
							</el-select>
							<span>仅执行计划为数字型时有效</span>
						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="jobData" prop="jobDataStr">
							<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 20 }"
								v-model="state.ruleForm.jobDataStr" placeholder="备注" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button size="default" v-if="state.dialog.type != 'edit'" @click="onReset">重 置</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>

<script setup lang="ts" name="systemDicDialog">
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';

// 导入接口
import { useSysApi } from "../../../api/sys";

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

const state = reactive({
	microName: "",
	ruleForm: {
		jobClass: "",
		jobName: "",
		jobGroupName: "",
		jobTime: "",
		timeUnit: "",
		jobDataStr: ""
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

// 打开弹窗
const openDialog = async (type: string, row?: any, microName?: any) => {
	if (type === 'edit') {
		state.microName = microName;
		state.ruleForm = {
			jobClass: row.jobClass,
			jobName: row.jobName,
			jobGroupName: row.jobGroupName,
			jobTime: row.jobTime,
			timeUnit: "MILLISECONDS",
			jobDataStr: JSON.stringify(row.jobData)
		};
		state.dialog.title = '修改数据字典';
		state.dialog.submitTxt = '修 改';
	} else {
		state.microName = "";
		state.ruleForm = {
			jobClass: "",
			jobName: "",
			jobGroupName: "", jobTime: "",
			timeUnit: "MILLISECONDS",
			jobDataStr: ""
		};
		state.dialog.title = '新增定时任务';
		state.dialog.submitTxt = '新 增';
		// 清空表单，此项需加表单验证才能使用
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;
	
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

const onReset = () => {
	state.microName = "";
	state.ruleForm = {
		jobClass: "",
		jobName: "",
		jobGroupName: "",
		jobTime: "",
		timeUnit: "MILLISECONDS",
		jobDataStr: ""
	};
}

// 提交
const onSubmit = async () => {
	if (state.dialog.type == 'edit') {
		let obj = {
			jobClass: state.ruleForm.jobClass,
			jobName: state.ruleForm.jobName,
			jobGroupName: state.ruleForm.jobGroupName,
			timeUnit: state.ruleForm.timeUnit,
			jobData: JSON.parse(state.ruleForm.jobDataStr),
			jobDataStr: state.ruleForm.jobDataStr
		} as any;
		if (!isNaN(Number(state.ruleForm.jobTime))) {
			obj['jobTime'] = Number(state.ruleForm.jobTime);
			obj['jobTimes'] = -1;
		} else {
			obj['jobTime'] = state.ruleForm.jobTime;
		}
		await useSysApi().quartzCreateOrupdate(state.microName, obj);
	} else {
		let obj = {
			jobClass: state.ruleForm.jobClass,
			jobName: state.ruleForm.jobName,
			jobGroupName: state.ruleForm.jobGroupName,
			timeUnit: state.ruleForm.timeUnit,
			jobData: JSON.parse(state.ruleForm.jobDataStr),
			jobDataStr: state.ruleForm.jobDataStr
		} as any;
		if (!isNaN(Number(state.ruleForm.jobTime))) {
			obj['jobTime'] = Number(state.ruleForm.jobTime);
			obj['jobTimes'] = -1;
		} else {
			obj['jobTime'] = state.ruleForm.jobTime;
		}
		await useSysApi().quartzCreateOrupdate(state.microName, obj);
	}
	ElMessage.success("["+state.dialog.submitTxt+"]，成功");
};



watch(
	() => state.dialog.isShowDialog,
	(newValue) => {
		if (newValue == true) {
			// 获取字典状态编码
		}
	}, { immediate: true }
);

// 暴露变量
defineExpose({
	openDialog
});
</script>

<style lang="scss">

.system-quartzManager-dialog-container {
	.bar_tools {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.el-table__expanded-cell {
		padding: 20px;
	}
}
</style>